<template>
  <!-- 潍坊市一体化综合指挥门户 -->
  <div class="menhu">
    <!-- 头部 -->
    <div class="top">
      <div>
        <p></p>
        <p>潍坊市一体化综合指挥门户</p>
        <p></p>
      </div>
      <div>
        <div>
          <ul>
            <li>
              <span class="shijian">
                <span>2021</span>
                年
                <span>03</span>
                月
                <span>30</span>
                日 星期
                <span>二</span>
              </span>
            </li>
            <li><span>10° —30° </span></li>
            <li>
              <span> 东风</span>
            </li>
            <li>
              <span> 晴</span>
            </li>
            <li>
              <img src="../assets/images/用户 (1)@2x.png" alt="" /><span
                >admin，</span
              >
            </li>
            <li><img src="../assets/images/矩形 5 拷贝@2x.png" alt="" /></li>
            <li>
              <img src="../assets/images/设置@2x.png" alt="" /><span
                >系统设置</span
              >
            </li>
            <li>
              <img src="../assets/images/矩形 5 拷贝@2x.png" alt="" />
            </li>
            <li>
              <img src="../assets/images/退出 (3)@2x.png" alt="" /><span
                >退出</span
              >
            </li>
          </ul>
        </div>
        <div></div>
      </div>
    </div>

    <!-- 底部 -->
    <div class="bottom">
      <!-- 底部第一块 -->
      <div class="B-left">
        <!-- 应用系统集成和轮播图 -->
        <div class="yyxtjc">
          <!-- 应用系统集成 -->
          <div>
            <div>应用系统集成</div>
            <!-- 轮播图 -->
            <div>
              <home-swiper></home-swiper>
            </div>
          </div>
        </div>

        <!-- 基础信息 -->
        <div class="jcxx"></div>
      </div>

      <!-- 底部第二块 -->
      <div class="B-center">
        <!-- 地图 -->
        <div class="map-box"></div>

        <!-- 事件列表 -->
        <div class="sjlb"></div>
      </div>

      <!-- 底部第三块 -->
      <div class="B-right">
        <!--消息提醒  -->
        <div class="xxtx"></div>

        <!-- 通知公告 -->
        <div class="tzgg"></div>
      </div>
    </div>
  </div>
</template>

<script>
import HomeSwiper from "./swiper/Swiper.vue";
export default {
  name: "menhu",
  data() {
    return {
      msg: "",
    };
  },
  components: {
    HomeSwiper,
  },
};
</script>

<style scoped lang="scss">
//  潍坊市一体化综合指挥门户
.menhu {
  width: 100%;
  // height: 13.5rem;
  height: 100%;

  // 头部
  .top {
    width: 100%;
    height: 8.7%;
    // border: 0.025rem solid #000;
    background: url("../assets/images/toptop.png") no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    > div:nth-of-type(1) {
      padding-left: 0.35rem;
      text-align: center;
      // line-height: 1.175rem;
      // background: red;
      color: #00ffff;

      font-weight: bold;
      font-size: 0.45rem;
      line-height: 100%;
      display: flex;
      flex-direction: column;
      padding-bottom: 0.15rem;
      > p {
        // padding-top: 15%;
        flex: 1;
      }
    }
    > div:nth-of-type(2) {
      display: flex;
      flex-direction: column;
      > div:nth-of-type(1) {
        flex: 1;
        display: flex;
        > ul {
          display: flex;
          justify-content: center;
          align-items: center;
          color: #dffdff;
          list-style: none;
          font-size: 0.2rem;

          > li {
            padding-right: 0.25rem;
            display: flex;
            justify-content: center;
            align-items: center;
            > img {
              margin-right: 0.0625rem;
            }
          }
          > li:nth-of-type(1) {
            > .shijian {
              > span {
                color: #0590fe;
                background: linear-gradient(0deg, #02f7f8 0%, #0590fe 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }
          }
          > li:nth-of-type(5) {
            > img {
              width: 0.1875rem;
              height: 0.2125rem;
            }
          }
          > li:nth-of-type(6) {
            > img {
              width: 0.0375rem;
              height: 0.225rem;
            }
          }
          > li:nth-of-type(7) {
            > img {
              width: 0.225rem;
              height: 0.225rem;
            }
          }
          > li:nth-of-type(8) {
            > img {
              width: 0.0375rem;
              height: 0.225rem;
            }
          }
          > li:nth-of-type(9) {
            > img {
              width: 0.2rem;
              height: 0.2rem;
            }
          }
        }
      }
      > div:nth-of-type(2) {
        flex: 1;
      }
    }
  }

  // 底部
  .bottom {
    width: 100%;
    height: 91.3%;
    // background: palegreen;
    box-sizing: border-box;
    border: 0.025rem solid #000;
    display: flex;

    // 底部第一块
    .B-left {
      // width: 5rem;
      flex: 1;
      height: 100%;
      border: 0.025rem solid #000;
      box-sizing: border-box;

      // 应用系统集成
      .yyxtjc {
        width: 100%;
        height: 50%;
        border: 0.025rem solid #000;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;

        > div:nth-of-type(1) {
          width: 4.475rem;
          height: 0.15rem;
          // line-height: .2125rem;
          color: #212245;
          background: url("../assets/images/10076@2x.png") no-repeat 0rem
            0.0375rem;
          background-size: 100% 100%;
          > div {
          }
        }
        > div:nth-of-type(1) {
        }
      }

      // 基础信息
      .jcxx {
        width: 100%;
        height: 50%;
        border: 0.025rem solid #000;
        box-sizing: border-box;
      }
    }

    // 底部第二块
    .B-center {
      // width: 13.125rem;
      flex: 2.5;
      border: 0.025rem solid #000;
      height: 100%;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;

      // 地图盒子
      .map-box {
        flex: 2;
        border: 0.025rem solid #000;
        box-sizing: border-box;
      }

      // 事件列表
      .sjlb {
        flex: 1;
        border: 0.025rem solid #000;
        box-sizing: border-box;
      }
    }

    // 底部第三块
    .B-right {
      height: 100%;
      border: 0.025rem solid #000;
      // width: 5rem;
      flex: 1;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;

      // 消息提醒
      .xxtx {
        flex: 1;
        border: 0.025rem solid #000;
      }

      // 通知公告
      .tzgg {
        flex: 1;
        border: 0.025rem solid #000;
      }
    }
  }
}
</style>
